<template>
  <div style="height: calc(100% - 110px); padding: 20px">
    <el-row :gutter="10">
      <el-col :span="12">
        <h2 class="pTitle">选择工序：共计{{ total }}</h2>
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="listQuery.deviceId"
          filterable
          :default-first-option="true"
          style="width: 100%"
          placeholder="请选择班组"
          @change="getQueryList"
        >
          <el-option
            v-for="item in teamData"
            :key="item.id"
            :label="item.deviceId"
            :value="item.deviceId"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select placeholder="品名" v-model="listQuery.productName" filterable clearable @change="queryProcessStepListSetup" @clear="queryProcessStepListSetup">
          <el-option
            v-for="item in proNameOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="10" >
      <el-col :span="24">
        <button
          style="margin-right: 1rem;"
          :disabled="totalPage == 0 || listQuery.pageNum == 1"
          @click="subGetData"
        >
          <arrow-left-bold style="width: 3em; height: 3em;" />
        </button>
        <button
          :disabled="totalPage == 0 || listQuery.pageNum == totalPage"
          @click="addGetData"
        >
          <arrow-right-bold style="width: 3em; height: 3em" />
        </button>
      </el-col>
    </el-row>
    <div class="processList">
      <div class="plist">
        <!-- <div v-for="item in processData" :key="item">{{ item.name }}</div> -->
        <div v-for="(item, index) in processData" :key="item.id" @click="goto(item.id, index)">
          {{ item.stepNo ? item.stepNo + '-' : ''  }}{{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryProcessStepList, queryTaskListTeamName, getQueryListWork } from "@/api/login";
import { useStore } from "vuex";
import { Search, ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
import { ref, computed, reactive } from "vue";
import { mapGetters } from "vuex";
export default {
  components: {
    Search,
    ArrowLeftBold,
    ArrowRightBold,
  },
  computed: {
    ...mapGetters(["teamName",'productName']),
  },
  data() {
    return {
      count: 0,
      teamData: [],
      queryForm:{
        teamName: ""
      },
      proNameOptions: [],
    };
  },
  setup(props) {
    const processId = ref("");
    const totalPage = ref(0);
    const total = ref(0);

    const listQuery = reactive({
      deviceId: "",
      name: "",
      productName: "",
      pageNum: 1,
      pageRow: 15,
    });
    const processData = ref([]);
    const queryProcessStepListSetup = () => {
      queryProcessStepList(listQuery).then((response) => {
        if (response.code === 0) {
          console.log(response)
          if(!listQuery.deviceId){
            processData.value = [];
            totalPage.value = 0;
            total.value = 0;
          } else {
            processData.value = response.data;
            totalPage.value = Math.ceil(processData.value.length / listQuery.pageRow);
            total.value = processData.value.length;
          }
        }
      });
    };

    return {
      asideWidth: "200px",
      processData,
      totalPage,
      total,
      listQuery,
      processId,
      screenHeight: document.body.clientHeight - 63,
      queryProcessStepListSetup,
    };
  },
  mounted() {
    this.queryTeam();
  },
  methods: {
    async getQueryList(bool = true){
      this.listQuery.productName = bool ? '' : this.productName;
      this.queryProcessStepListSetup();
      this.proNameOptions = await getQueryListWork('product_name', this.listQuery.productName, this.listQuery.deviceId);
    },
    addGetData() {
      this.listQuery.pageNum++;
      console.log(this.listQuery.pageNum);
      this.queryProcessStepListSetup();
    },
    subGetData() {
      this.listQuery.pageNum--;
      this.queryProcessStepListSetup();
    },
    queryTeam() {
      queryTaskListTeamName({}).then((response) => {
        console.log(response,this.teamName)
        if (response.code === 0) {
          this.teamData = response.data;
          this.listQuery.deviceId = this.teamName ?? this.teamData[0]?.deviceId
          this.getQueryList(false);
        }
      });
    },
    // chooseProcess() {
    //   this.$refs["processForm"].validate(valid => {
    //     if (valid) {
    //       this.btnDisable = true;
    //       var process = this.processData.filter(item => item.id == this.processForm.process)
    //       this.$store.dispatch("setProcess", process[0]);
    //       this.$store.dispatch("setActiveIndex", '/doingTask');
    //       this.$router.push('/doingTask');
    //     }
    //     this.btnDisable = false;
    //   });
    // },
    // changeActive(index) {
    //   this.activeIndex = index;
    // },
    goto(id, index) {
      console.log(index)
      var process = this.processData.filter((item) => item.id == id);
      this.$store.dispatch("setProcess", {...process[0], isShowCompleteReport: index == this.processData.length -1});
      this.$store.dispatch("setTeamId", this.listQuery.deviceId);
      this.$store.dispatch("setActiveIndex", "/doingTask");
      this.$store.dispatch("setProductName", this.listQuery.productName);
      this.$router.push("/doingTask");
    },
  },
  watch: {
    $route: function (to) {
      this.activeIndex = to.path;
      this.$store.dispatch("setActiveIndex", to.path);
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-tabs__item) {
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  font-weight: 600;
}
.btnList {
  width: 260px;
  background-color: #3c495c;
  margin: 0;
  padding: 0;
  padding-top: 10px;
  > li,
  .el-select {
    height: 60px;
    line-height: 60px;
    color: #fff;
    list-style-type: none;
    // text-indent: 30px;
    font-size: 18px;
    text-align: center;
    margin: 0 10px;
    border-radius: 4px;
    &li:hover {
      background-color: #0c64eb;
    }
  }
  .el-select,
  .select-trigger {
    width: calc(100% - 20px);
    height: 60px;
  }
}
:deep(.btnList .el-input__inner),
:deep(.btnList .el-input__icon) {
  font-size: 20px;
  height: 60px;
  line-height: 60px;
}
.mainDiv {
  padding: 0;
}
.el-menu-item.is-active,
.el-menu-item:hover {
  background-color: #0c64eb !important;
}
:deep(input::-webkit-input-placeholder) {
  color: #999999;
}
:deep(input::-moz-placeholder) {
  /* Mozilla Firefox 19+ */
  color: #999999;
}
:deep(input:-moz-placeholder) {
  /* Mozilla Firefox 4 to 18 */
  color: #999999;
}
:deep(input:-ms-input-placeholder) {
  /* Internet Explorer 10-11 */
  color: "#999";
}
:deep(.el-carousel__container) {
  height: 100%;
}
  .btnDiv {
    // position: relative;
    width: 10%;
    button {
      background: #f0f0f8;
      // position: absolute;
      // left: 0;
      // top: 0;
      // right: 0;
      // bottom: 0;
      margin: auto;
      width: 120px;
      height: 120px;
      border: none;
      &:disabled {
        cursor: no-drop;
      }
    }
  }
.processList {
  display: flex;
  height: calc(100% - 100px);
  margin-top: 20px;
  background: #f0f0f8;

  .plist {
    // flex-grow: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    margin-bottom: -30px;
    > div {
      font-size: 0.32rem;
      border-radius: 6px;
      // height: calc(20% - 30px);
      height: calc(33% - 16px);
      margin-right: 20px;
      margin-bottom: 20px;
      width: calc(20% - 16px);
      // width: 20%;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      background: #fff;
      box-sizing: border-box;
      -moz-user-select: none;
      -khtml-user-select: none;
      user-select: none;
      // border: 1px solid #a7a7a7;
      &:active {
        background: rgb(226, 226, 226);
      }
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
.pTitle {
  margin: 0;
  height: 40px;
  line-height: 40px;
  // text-indent: 56px;
  font-size: 24px;
}
</style>